<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>账单明细 - __SITENAME__</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link type="text/css" href="__DOMAINURL____WEBSITEDIR____BAOFENG__/css/public.css" rel="stylesheet" />
    <link href="__DOMAINURL____WEBSITEDIR____BAOFENG__/css/font_1473832019_2999358.css" rel="stylesheet" type="text/css" />
    <script src="__DOMAINURL____WEBSITEDIR____PLUGINS__/jQuery/jquery-2.2.3.min.js"></script>
    <script src="__DOMAINURL____WEBSITEDIR____BAOFENG__/js/vue.min.js"></script>
    <script src="__DOMAINURL____WEBSITEDIR____BAOFENG__/js/layer/layer.js"></script>
    <script src="__DOMAINURL____WEBSITEDIR____BAOFENG__/js/public.js?v=80"></script>
    <link type="text/css" href="__DOMAINURL____WEBSITEDIR____BAOFENG__/js/layer/need/layer.css" rel="stylesheet" />
    <style>body { padding-bottom: 70px; }</style>
    <link type="text/css" href="__DOMAINURL____WEBSITEDIR____BAOFENG__/css/order.css" rel="stylesheet" />
</head>

<body>
<div class="loader">
    <div class="act">
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>
    <div class="bg"></div>
</div>

<style>
    .other
    {
        overflow:hidden;
        transition: height 0.3s;
        height:0px;
        background:#000;
        height:0px;
        box-sizing:border-box;
    }

    .other ul
    {
        padding:10px 0;
        background:#1e1e1e;

    }
    .other.active
    {
        border-top:1px solid #333;
        height:auto;

    }
    .other.active ul
    {

    }
    .other li
    {
        display: inline-block; width:25%; margin:5px 4%;
    }
    .other li a{ display:block; border:1px solid #363636; border-radius:6px;  box-sizing:border-box; text-align:center; line-height:35px; font-size:12px; transition: background 0.2s;}
    .other li.active a
    {
        background:#d3af30;
        color:#333;
        border:0;
    }
    .list-bill td
    {
        line-height:20px;
    }
</style>
<script>
    var vue;
    $(function () {
        vue = new Vue({
            el: 'body',
            data: {
                other_status: false,
                other_str: '全部分类',
                other_index: 0,
                menu_index: 0,
                list: null,
                page:0,
                count: 0,
                page_end:0,
                msg:'',
            },
            methods: {
                init: function () {
                    this.menu_click(1);
                },
                other_item_click: function (index, str) {
                    this.other_status = false;
                    if (this.other_index == index) return;
                    this.other_str = str;
                    this.other_index = index;
                    this.getdata(true);
                },
                menu_click: function (index) {
                    if (this.menu_index == index) return;
                    this.menu_index = index;
                    this.list = null;
                    this.getdata(true);

                },
                getdata: function (isupdate) {
                    if (isupdate) {
                        this.page = 1;
                        this.list = null;
                    }
                    var PageSize = 10;
                    var self = this;
                    loadshow();
                    postMsg("loadMyBills", {"page": this.page, "pageSize": PageSize, 'type': this.other_index, 'date_time': this.menu_index }, function (data) {
                        loadhide();
                        if(data.success == 1)
                        {
                            var list=self.list;

                            if (list!=null && list.length > 0) {
                                list = list.concat(data.data)
                            } else {
                                list = data.data;
                            }
                            self.list = list;
                            self.count = data.count;
                            self.msg = data.msg;
                            self.page_end = Math.ceil(data.count / PageSize);
                        }
                        else
                        {
                            return true;
                        }
                    })
                },
                getLocalTime: function (str) {
                    return getLocalTime(str)
                },
                more: function () {
                    this.page += 1;
                    this.getdata(false);
                }
            }
        });
        vue.init();
    })
</script>
<div class="bill-details">
    <div class="head-menu uk-block  uk-block-default">
        <a  @click="menu_click(1)" v-bind:class="{'active':menu_index==1}" href="javascript:;">本月</a><a href="#" @click="menu_click(2)" v-bind:class="{'active':menu_index==2}">近三月</a><a href="javascript:;" @click="menu_click(0)" v-bind:class="{'active':menu_index==0}">所有时间</a><a href="javascript:;" @click="this.other_status = !this.other_status">{{other_str}}</a>
        <div class="other" v-bind:class="{'active':other_status}">
            <ul >
                <li v-bind:class="{'active':other_index==0}" dataaction="0" datacode="全部分类"><a href="javascript:;" @click="other_item_click(0,'全部分类')">全部分类</a></li><li dataaction="1" v-bind:class="{'active':other_index==1}" datacode="充值"><a href="javascript:;" @click="other_item_click(1,'充值')">充值</a></li><li dataaction="5,6,7" v-bind:class="{'active':other_index=='5,6,7'}" datacode="平仓"><a href="javascript:;" @click="other_item_click('5,6,7','平仓')">平仓</a></li><li dataaction="2,8,9" v-bind:class="{'active':other_index=='2,8,9'}" datacode="提现"><a href="javascript:;" @click="other_item_click('2,8,9','提现')">提现</a></li><li dataaction="3" v-bind:class="{'active':other_index==3}" datacode="建仓"><a href="javascript:;" @click="other_item_click(3,'建仓')">建仓</a></li><li dataaction="4" v-bind:class="{'active':other_index==4}" datacode="佣金奖励"><a href="javascript:;" @click="other_item_click(4,'佣金奖励')">佣金奖励</a></li>
            </ul>
        </div>
    </div>
    <div class="list-bill uk-block  uk-block-default">
        <table>
            <thead>
            <tr>
                <td width="100px">时间</td>
                <td width="150px">订单号</td>
                <td>涉及金额</td>
                <td>描述</td>
                <td></td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in list">
                <td style="text-align:left; padding-left:10px; ">{{item.datetime}}</td>
                <td style="text-align:left; padding-left:10px; ">{{item.out_trade_no}}</td>
                <td ><div v-bind:class="{'text-red':item.type==1||item.type==4||item.type==5||item.type==7||item.type==9,'text-green':item.type==2||item.type==3||item.type==6||item.type==8}"><span v-if="item.type==1||item.type==4||item.type==5||item.type==7||item.type==9">+</span><span v-if="item.type==2||item.type==3||item.type==6||item.type==8">-</span>{{parseFloat(item.money).toFixed(2)}}</div><small>{{parseFloat(item.balance).toFixed(2)}}</small></td>
                <td style="text-align:center;">{{item.content}}</td>
                <td style="text-align:left;"><small> {{item.content2}}</small></td>
            </tr>
            </tbody>
        </table>
        <a class="bottom_more" @click="more()" v-if="page_end>page">加载更多</a>
        <a class="bottom_no_more" v-if="page_end<=page">没有更多了~</a>
        <a class="bottom_no_more" v-if="count==0">{{msg}}</a>
    </div>
</div>
<div class="nav">
    <nav>
        <a href="__DOMAINURL____WEBSITEDIR__/shopping/index"><i class="iconfont icon-yaoqing gred"></i><br>商城</a>
        <a href="__DOMAINURL____WEBSITEDIR__/shopping/extract"><i class="iconfont icon-wodetuandui01"></i><br>提货劵</a>
        <a href="__DOMAINURL____WEBSITEDIR__/index"><i class="iconfont icon-crmshangsheng "></i><br>交易</a>
        <a href="__DOMAINURL____WEBSITEDIR__/user/index" class="red"><i class="iconfont icon-yonghuzhongxin"></i><br>我&nbsp;</a>
    </nav>
</div>
</body>

</html>